<template>
  <view class="content">
    <!-- <view class="input-group">
			<view class="input-row">
				<text class="title">邮箱：</text>
				<m-input type="text" focus clearable v-model="email" placeholder="请输入邮箱"></m-input>
			</view>
		</view>

		<view class="btn-row">
			<button type="primary" class="primary" @tap="findPassword">提交</button>
		</view> -->

    <view class="top">
      需要先验证你的身份
    </view>

    <view class="input">
      <view class="input_l">
        手机号码
      </view>
      <input
        type="number"
        placeholder="请输入你的手机号码"
        class="input_c"
        @input="onKeyInput"
        maxlength="11"
        v-model="account"
        focus
      />
    </view>
    <view class="input">
      <view class="input_l">
        验证码
      </view>
      <input
        type="number"
        placeholder="请输入验证码"
        class="input_c"
        v-model="yzm"
        @input="onKeyInput"
      />

      <view
        class="input_r"
        :class="{ active: !disableCodeBtn }"
        @tap="sendCode"
        >{{ codeBtn.text }}</view
      >

      <!-- <input type="text" placeholder="请输入验证码" class="input_c"/>
			<view class="input_r">
				获取验证码
			</view> -->
    </view>

    <view class="btn-row" :class="{ not: !canclick }">
      <view
        type="primary"
        class="bt primary"
        @tap="bindLogin"
        :loading="isLoading"
        >提交</view
      >
    </view>
  </view>
</template>

<script>
import request from '@/common/request.js';
import service from '../../service.js';
import mInput from '../../components/m-input.vue';

export default {
  components: {
    mInput,
  },
  data() {
    return {
      repeat_click: true,
      providerList: [],
      hasProvider: false,
      account: '',
      yzm: '',
      password: '',
      verifyCode: '',
      positionTop: 0,
      isDevtools: false,
      seconds: 60,
      disableCodeBtn: true,
      codeBtn: {
        text: '获取验证码',
        waitingCode: false,
        count: this.seconds,
      },
      isLoading: false,
      canclick: false,
      mparameterw: false,
    };
  },
  methods: {
    // 判断按钮高亮
    onKeyInput: function(event) {
      console.log(this.account, this.yzm);
      this.mparameterw = false;
      if (this.account != '' && this.yzm != '') {
        this.canclick = true;
      } else {
        this.canclick = false;
      }
    },

    // 发送验证码
    sendCode: function() {
      if (this.account.length < 1) {
        this.repeat_click = true;
        uni.showToast({
          icon: 'none',
          title: '请填写手机号',
        });
        return;
      }

      if (this.account.length != 11) {
        this.repeat_click = true;
        uni.showToast({
          icon: 'none',
          title: '手机号码填写有误',
        });
        return;
      }

      if (this.disableCodeBtn == true) {
        request({
          url: '/ucenter/opt/forget-pwd',
          data: {
            // appId: "5efe4be4d9eff40a",
            username: this.account,
            // scene: "forgot"
          },

          method: 'PUT',
          success: openIdRes => {
            console.log(openIdRes);

            if (openIdRes.data.success == true) {
              this.repeat_click = true;
              uni.showToast({
                title: openIdRes.data.msg,
                icon: 'none',
              });

              uni.setStorageSync('uuid', openIdRes.data.data);

              this.codeBtn.waitingCode = true;
              this.codeBtn.count = this.seconds;
              this.codeBtn.text = this.codeBtn.count + 's';
              this.disableCodeBtn = false;

              let countdown = setInterval(() => {
                this.codeBtn.count--;
                this.codeBtn.text = this.codeBtn.count + 's';
                if (this.codeBtn.count < 0) {
                  clearInterval(countdown);
                  this.codeBtn.text = '重新发送';
                  this.codeBtn.waitingCode = false;
                  this.disableCodeBtn = true;
                }
              }, 1000);
            } else {
              this.repeat_click = true;
              uni.showToast({
                title: openIdRes.data.msg,
                icon: 'none',
              });
            }
          },
          fail: () => {
            this.repeat_click = true;
            uni.showToast({
              title: '服务器开小差，请稍后~',
              icon: 'none',
            });
            return false;
          },
        });
      }
    },

    // 验证
    bindLogin() {
      if (this.account.length != 11) {
        this.repeat_click = true;
        uni.showToast({
          icon: 'none',
          title: '手机号码填写有误',
        });
        return;
      }

      if (this.yzm.length < 1) {
        this.repeat_click = true;
        uni.showToast({
          icon: 'none',
          title: '请填写短信验证码',
        });
        return;
      }

      //对象的方式创建
      var reg = new RegExp(/(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{6,16}$/);
      //字符串
      var str = this.password;
      //调用方法验证字符串是否匹配
      var flag = reg.test(str);
      console.log(flag); //true

      if (!flag) {
        this.mparameterw = true;
      }

      // this.isLoading = true;
      uni.setStorageSync('phone', this.account);
      uni.setStorageSync('yzm', this.yzm);
      uni.navigateTo({
        url: '../pwd/pwdtwo?yzm=this.yzm',
      });

      // 	request({
      // 		url: '/passport/v1/general/otp/validate',
      // 		data: {
      // 			appId: "5efe4be4d9eff40a",
      // 			mobile: this.account,
      // 			code: this.yzm,
      // 			uuid: uni.getStorageSync("uuid"),
      // 			// scene: "forgot"
      // 		},

      // 		method: 'POST',
      // 		success: openIdRes => {

      // 			console.log(openIdRes);

      // 			// 已经授权了、查询到用户的数据了
      // 			if (openIdRes.data.success == true) {
      // 				uni.setStorageSync("yzm",this.yzm);
      // 				uni.setStorageSync("phone",this.account);

      // 				uni.navigateTo({
      // 					url: '../pwd/pwdtwo',
      // 				});

      // 			} else {
      // 				// 验证码错误
      // 									this.repeat_click = true;
      //	uni.showToast({
      // 					title: openIdRes.data.msg,
      // 					icon: 'none'
      // 				});
      // 				this.isLoading = false;
      // 			}
      // 		},
      // 		fail: () => {
      // 								this.repeat_click = true;
      //					uni.showToast({
      // 				title: '服务器开小差，请稍后~',
      // 				icon: 'none'
      // 			});
      // 			return false;
      // 		}
      // 	});
    },
  },
};
</script>

<style>
.content {
  background: #f2f2f2;
}
.top {
  width: 100%;
  height: 36rpx;
  display: block;
  float: left;
  line-height: 36rpx;
  font-size: 28rpx;
  color: #888888;
  padding: 30rpx 0 10rpx 30rpx;
  border-bottom: 1px solid #dddddd;
}
.input {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  background: #ffffff;
  border-bottom: 1px solid #dddddd;
}
.input_l {
  width: 166rpx;
  height: 42rpx;
  display: block;
  float: left;
  margin: 24rpx 10rpx 24rpx 30rpx;
  font-size: 34rpx;
  color: #000000;
  line-height: 42rpx;
}
.input_c {
  width: 330rpx;
  height: 42rpx;
  display: block;
  float: left;
  margin: 24rpx 10rpx 0 0rpx;
  font-size: 32rpx;
  color: #000000;
  line-height: 42rpx;
}
.input_r {
  width: auto;
  height: 42rpx;
  display: block;
  float: right;
  margin: 24rpx 30rpx 0 0rpx;
  font-size: 32rpx;
  color: #256aff;
  line-height: 42rpx;
}
.bt {
  width: 690rpx;
  height: 94rpx;
  margin: 30rpx 0 0 30rpx;
  background: #256aff;
  border-radius: 10rpx;
  text-align: center;
  line-height: 94rpx;
  font-size: 36rpx;
  color: #ffffff;
  display: block;
  float: left;
  border: 0;
}
.bt:active {
  background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.199437),
      rgba(0, 0, 0, 0.199437)
    ),
    #256aff;
  border-radius: 8px;
}

.not uni-button {
  opacity: 0.5;
}

.input_r {
  width: auto;
  height: 42rpx;
  display: block;
  float: right;
  margin: 24rpx 30rpx 24rpx 0rpx;
  font-size: 32rpx;
  color: #256aff;
  line-height: 42rpx;
  background: none !important;
  border: 0 !important;
  padding: 0;
}
uni-button:after {
  border: 0 !important;
}

.input_r:active {
  color: #256aff;
  background: none !important;
}

.input_r.active {
  color: rgb(176, 173, 176);
}
</style>
